<template>
  <div class="op-container">
    <div class="filter-container">
      <span class="filter-title filter-item">所属公司</span>
      <k-select
        v-model="listQuery.companyId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{opations:companyListData, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">所属主播</span>
      <k-select
        v-model="listQuery.fissionId"
        class="filter-item right-item"
        style="width:120px"
        :custom-params="{opations:fissionListData, label:'lineName',value:'lineId'}"
        @handleSelectEvent="handleFilter"
      />
    </div>
    <k-button v-if="authorityHandle(161)" class="top-btn" value="添加商户号" @click.native="addMchIdDialog" />
    <k-button class="top-btn" value="档位配置" @click.native="rechargeAmountDialog" />
    <div class="top-right-btn">
      <el-switch
        v-model="payWayState"
        :disabled="!authorityHandle(161)"
        active-color="#3b425d"
        inactive-color="#E9EBF2"
        active-text="开启"
        inactive-text="关闭"
        :active-value="1"
        :inactive-value="0"
        @change="payWayStateChange()"
      />
    </div>
    <!--表格相关 -->
    <el-table
      :data="tableData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column type="index" label="序号" width="60px" align="center" />
      <el-table-column prop="appId" min-width="100px" label="appId" align="center" show-overflow-tooltip />
      <el-table-column prop="userId" min-width="100px" label="userId" align="center" show-overflow-tooltip />
      <el-table-column prop="rsaPrivateKey" min-width="100px" label="rsaPrivateKey" align="center" show-overflow-tooltip />
      <el-table-column prop="companyName" min-width="100px" label="所属公司" align="center" show-overflow-tooltip />
      <el-table-column min-width="100px" label="状态" align="center">
        <template slot-scope="scope">
          <el-select v-model="scope.row.showStatus" :disabled="!authorityHandle(161)" clearable placeholder="请选择" @change="changeShowState(scope.row)">
            <el-option
              v-for="item in stateList"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
            />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column min-width="100px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.mcStatus"
            :disabled="!authorityHandle(161)"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开启"
            inactive-text="关闭"
            :active-value="1"
            :inactive-value="0"
            @change="mChIdStateChange($event,scope)"
          />
        </template>
      </el-table-column>

      <el-table-column v-if="authorityHandle(161)" prop="msg" min-width="100px" label="备注" align="center">
        <editable-cell
          v-model="row.msg"
          slot-scope="{row}"
          :show-input="row.editMode"
          @blur="blurInput(row)"
          @keyup.enter.native="modifyItemNote(row)"
        >
          <span slot="content">{{ row.msg }}</span>
        </editable-cell>
      </el-table-column>

      <el-table-column v-else prop="msg" min-width="100px" label="备注" align="center" />

      <el-table-column v-if="authorityHandle(161)" min-width="80px" label="操作" align="center">
        <template slot-scope="scope">
          <k-button class="table-btn" value="修改" @click.native="updatePayMchDialog(scope.row)" />
          <k-button class="table-btn" value="删除" @click.native="deletePayMchDialog(scope.row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="getList"
    />

    <!-- 添加"商户号 弹窗 -->
    <k-dialog
      :show-hide.sync="chargeParamDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加商户号"
      class="addBox-dialog"
      :show-foot="false"
      :two-btn="true"
      @click="savePayCmhIDData"
    >
      <el-form label-width="auto">
        <el-form-item label="所属公司：">
          <el-select v-model="chargeParam.companyId" clearable placeholder="请选择">
            <el-option
              v-for="item in companyListData"
              :key="item.lineId"
              :label="item.lineName"
              :value="item.lineId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="appId：">
          <el-input v-model="chargeParam.appId" :readonly="chargeParam.disable" placeholder="请输入appId" />
        </el-form-item>
        <el-form-item label="userId：">
          <el-input v-model="chargeParam.userId" :readonly="chargeParam.disable" placeholder="请输入userId" />
        </el-form-item>
        <el-form-item label="rsaPrivateKey：">
          <el-input v-model="chargeParam.rsaPrivateKey" :readonly="chargeParam.disable" placeholder="请输入rsaPrivateKey" />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 消费档位设置 -->
    <k-dialog
      :show-hide.sync="payStepSettingDialog.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="档位配置"
      :show-foot="false"
      :two-btn="authorityHandle(161)"
      @click="saveChargeData"
    >
      <div v-for="(item,index) in chargeSetting.itemList" :key="item.id" class="Recharge_Data">
        <div class="Recharge_Data_box">
          <span>消费档位:</span>
          <el-input v-model.number="item.rechargeAmount" :readonly="!authorityHandle(161)" style="margin-right:20px" />
          <span>消费赠送:</span>
          <el-input v-model.number="item.givePercent" :readonly="!authorityHandle(161)" /> %
        </div>
        <div class="operation">
          <i v-if="authorityHandle(161)" v-show="index != 0" class="el-icon-remove" @click="Delete(item.id)" />
          <i v-if="authorityHandle(161)" v-show="index == chargeSetting.itemList.length - 1" class="el-icon-circle-plus" @click="newly_added()" />
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
// listBcPayMsgData
// saveBcPayMsg
// updateBcPayMsg
// updateBcPayMsgStatus
// deleteBcPayMsg
import { getSettingItem, getRechargeStatus, deleteBcPayMsg, listBcPayMsgData, saveBcPayMsg, updateBcPayMsg, updateBcPayMsgStatus, upDateRechargeStatus, saveSettingItem } from '@/api/settings/paysetting'
import { companyList, fissionList } from '@/api/company/index.js'
import EditableCell from '@/components/EditableCell'
import Pagination from '@/components/Pagination'

export default {
  components: { EditableCell, Pagination },

  data() {
    return {
      companyListData: [],
      fissionListData: [],
      payWayState: 1,
      stateList: [{ lineId: 0, lineName: '使用中' }, { lineId: 1, lineName: '已停用' }, { lineId: 2, lineName: '已封禁' }, { lineId: 3, lineName: '待使用' }],
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        companyId: '',
        fissionId: '',
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        type: '2' // 微信1|支付宝2",
      },
      chargeParamType: 'addition',
      chargeParam: {
        disable: false,
        companyId: undefined,
        appId: undefined,
        userId: undefined,
        rsaPrivateKey: undefined,
        mcType: 2
      },
      payType: 101,
      chargeSetting: { // 首充赠送
        id: 101,
        itemList: [{
          rechargeAmount: undefined, // 消费挡位',
          givePercent: undefined // 消费赠送'
        }]
      },
      chargeParamDialog: {
        showHide: false
      },
      payStepSettingDialog: {
        showHide: false
      },
      tableData: []
    }
  },
  created() {
    this.getList()
    this.getCompanyList()
    this.getFissionList()
    this.getPayState()
    this.getSettingItem()
  },
  methods: {
    getCompanyList() {
      companyList().then(res => {
        this.companyListData = res.data
      })
    },
    getFissionList() {
      fissionList({ status: 'normal' }).then(res => {
        this.fissionListData = res.data
      })
    },
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.getList()
    },
    // 列表页加载数据
    getList() {
      listBcPayMsgData(this.listQuery).then(res => {
        const originList = res.data
        this.totalRows = originList.totalRows
        this.tableData = originList.rows.map(row => {
          return {
            ...row,
            editMode: false
          }
        })
      })
    },
    // 获取支付方式开关
    getPayState() {
      getRechargeStatus({ 'id': this.payType }).then(res => {
        this.payWayState = res.data === true ? 1 : 0
      })
    },
    getSettingItem() {
      getSettingItem({ 'id': this.payType }).then(res => {
        this.chargeSetting.itemList = res.data
      })
    },
    // 添加商户号
    addMchIdDialog() {
      this.$resetForm(this.chargeParam)
      this.chargeParam.disable = false
      this.chargeParamType = 'addition'
      this.chargeParam.mcType = 2
      this.chargeParamDialog.showHide = true
    },

    updatePayMchDialog(row) {
      this.chargeParam = row
      this.chargeParam.disable = true
      this.chargeParamType = 'update'
      this.chargeParamDialog.showHide = true
    },

    // 保存商户号
    savePayCmhIDData() {
      if (!this.chargeParam.appId || !this.chargeParam.userId || !this.chargeParam.rsaPrivateKey) {
        this.$message.error('请填写商户信息')
        return
      }
      if (this.chargeParamType == 'addition') {
        saveBcPayMsg(this.chargeParam).then(res => {
          if (res.data.success) {
            this.$message.success('保存成功')
            this.chargeParamDialog.showHide = false
            this.$resetForm(this.chargeParam)
            this.chargeParam.mcType = 2
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      } else {
        updateBcPayMsg(this.chargeParam).then(res => {
          if (res.data.success) {
            this.$message.success('修改成功')
            this.chargeParamDialog.showHide = false
            this.$resetForm(this.chargeParam)
            this.chargeParam.mcType = 2
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }
    },
    // 档位配置
    rechargeAmountDialog() {
      this.payStepSettingDialog.showHide = true
    },
    // 保存消费档位
    saveChargeData() {
      saveSettingItem(this.chargeSetting).then(res => {
        this.$message.success('保存成功')
        this.payStepSettingDialog.showHide = false
      })
    },
    // 支付方式开关
    // wx(1,"微信"),
    // zfb(2,"支付宝"),
    // wxOther(3,"第四方微信"),
    // zfbOther(4,"第四方支付宝");
    payWayStateChange() {
      upDateRechargeStatus({ 'id': this.payType }).then(res => {
        this.$message.success('操作成功')
      })
    },
    // 商户号开关
    mChIdStateChange(event, scope) {
      const id = scope.row.id
      updateBcPayMsgStatus({ 'id': id }).then(res => {
        if (res.data.success) {
          this.getList()
          this.$message.success('操作成功')
        } else {
          this.$message.error(res.data.msg)
          scope.row.mcStatus = event === 0 ? 1 : 0
        }
      })
    },
    changeShowState(val) {
      updateBcPayMsg({ id: val.id, showStatus: val.showStatus, companyId: val.companyId }).then(res => {
        if (res.data.success) {
          this.$message.success('修改成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },
    blurInput(row) {
      this.modifyItemNote(row)
    },
    // 修改备注
    modifyItemNote(row) {
      if (!row.msg) return
      updateBcPayMsg({ id: row.id, companyId: row.companyId, msg: row.msg }).then(res => {
        if (res.data.success) {
          this.$message.success('备注成功')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    deletePayMchDialog(id) {
      this.$confirm('确定删除选中的商户么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteBcPayMsg({ id: id }).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功')
            this.getList()
          } else {
            this.$message.error(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // 设置新增
    newly_added() {
      this.chargeSetting.itemList.push({
        rechargeAmount: undefined, // 消费挡位',
        givePercent: undefined // 消费赠送'
      })
    },
    // 设置删除
    Delete(value) {
      var index = this.chargeSetting.itemList.findIndex(function(item) {
        return item.id === value
      })
      if (index !== -1) {
        this.chargeSetting.itemList.splice(index, 1)
      }
    }
  }
}
</script>
<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #3b425d!important;
}
</style>
<style lang="scss" scoped>
$mainColor:#3b425d;// 主色调
$disabledColor: #909399; //禁用色
$hoverColor:#1D143C;// 鼠标停留主色调浅色
  .filter-container {
    width: 100%;
    height: 48px;
    line-height: 48px;
    margin-bottom: 20px;
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }

    .right-item {
      margin-right: 10px;
    }

    .kInput {
      position: absolute;
      right: 20px;
    }

    .filter-title {
      height: 48px;
      line-height: 48px;
      font-size: 16px;
      font-weight: 500;
      margin-right: 22px;
      color: #14162E;
    }

    .user-item {
      margin-left: 10px;
      margin-right: 20px;
    }

    .user-status,
    .account-status {
      margin-right: 20px;
    }
  }
.table-btn{
  width: 90px;
  height: 35px;
  line-height:35px;
  padding: 0;
  background: #e7ecf8;
  border: 1px solid $mainColor;
  border-radius: 8px;
  font-size: 14px;
  color: $mainColor;
  &:hover{
    background: $mainColor;
    color: #fff;
  }
   &:focus {
     background-color: #e7ecf8;
  }
}
::v-deep .el-table__body tr.current-row>td {
    background: #ECF5FF !important;
}
.op-container{
  margin: 20px;
}
.top-btn{
  margin: 10px 0px 30px 0px;
  font-size: 14px;
  color: #ffffff;
  &:nth-of-type(2){
    margin-left: 10px;
     margin-right: 10px;
  }

}
.top-right-btn{
  position: absolute;
  right: 20px;
  top: 120px;
  ::v-deep .el-button{
    background-color: #F8F7FB;
    border-color: transparent;
    color: #14162E;
    &:hover{
      color: #ffffff;
      background-color: $mainColor;
    }
    &:active{
      color: #14162E;
    }
  }
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
    border-color: $mainColor;
}
::v-deep .el-input__inner:focus {
    border-color: $mainColor;
}

.addBox-dialog{
  ::v-deep .el-dialog__body{
    padding: 10px 80px;
  }
  ::v-deep .el-select{
    width: 100%;
  }
 ::v-deep .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
    font-size: 40px;
  }
}

.Recharge_Data {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #000;
  .Recharge_Data_box {
    width: 80%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      width: 100px;
      height: 35px;
      input {
        width: 100px;
        height: 35px;
      }
    }
    span {
      font-size: 14px;
      width: 100px;
    }
  }
  .operation {
    width: 12%;
    display: flex;
    justify-content: space-between;
    .el-icon{
        &-circle-plus, &-remove{
          font-size: 22px;
          color:#3b425d;
          margin-left: 10px;

      }
    }

  }
}

</style>

